<template>
  <div id="head" style="margin-top: 20px">
    <el-form :rules="rules" ref="form" :model="outPatientForm" >
    <el-row>
      <el-col :span="24">
        <el-button type="primary" icon="el-icon-arrow-right" circle></el-button>
        <span class="title">当前病人:</span>
        <el-form-item v-if="idHid" label="ID" class="outpatient">
        <el-input v-model="outPatientForm.id"/>
        </el-form-item>
        <el-form-item  label="姓名" class="outpatient" prop="name">
        <el-input v-model="outPatientForm.name"/>
        </el-form-item>
        <el-form-item label="就诊号" class="outpatient" prop="medicalNo">
        <el-input v-model="outPatientForm.patientMedicalRecordNo"/>
        </el-form-item>
        <el-form-item label="性别" class="outpatient" prop="gender">
        <el-input v-model="outPatientForm.gender"/>
        </el-form-item>
        <el-form-item label="年龄" class="outpatient" prop="age">
        <el-input v-model="outPatientForm.ageStr"/>
        </el-form-item>
          <el-divider></el-divider>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="病历首页" name="medicalRecord">
              <el-row>
                <el-col :span="14">
                  <el-tag>病史内容:</el-tag>
                  <div class="iHref">
                    <i @click="$alert('暂存')" class="el-icon-upload2">暂存</i>
                    <i @click="$alert('取出暂存')" class="el-icon-download" style="margin-left: 5%">取出暂存</i>
                  </div>

                  <el-button round class="quick" v-if="button1Show" @click="showOutStart">快捷操作></el-button>
                  <el-button round class="quick" v-if="button2Show" @click="showOutEnd">快捷操作<</el-button>
                  <div>
                    <el-button
                      type="primary"
                      size="mini"
                      style="margin: 1%"
                      @click="drawer1 = true">挂号病患列表</el-button>
                    <el-drawer
                      title="已挂号病患列表"
                      :visible.sync="drawer1"
                      :direction="direction">
                      <el-table :data="pmsPatientData" @row-click="patientDataTransfer">
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="dateOfBirth" label="出生年月"></el-table-column>
                        <el-table-column prop="medicalRecordNo" label="就诊号"></el-table-column>
                        <el-table-column prop="identificationNo" label="身份证号"></el-table-column>
                        <el-table-column prop="gender" label="性别"></el-table-column>
                        <el-table-column prop="homeAddress" label="地址"></el-table-column>
                        <el-table-column prop="phoneNo" label="联系方式"></el-table-column>
                      </el-table>
                      <pagination
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getListPatient"
                      />
                    </el-drawer>
                      <div>
                      <el-form-item label="主诉" class="outpatientCatalogInput">
                        <el-input type="textarea" v-model="outPatientForm.chiefComplaint"></el-input>
                      </el-form-item>
                      <el-form-item label="现病史" class="outpatientCatalogInput">
                        <el-input type="textarea" v-model="outPatientForm.historyOfPresentIllness"></el-input>
                      </el-form-item>
                      <el-form-item label="现病治疗情况" class="outpatientCatalogInput">
                        <el-input type="textarea" v-model="outPatientForm.historyOfTreatment"></el-input>
                      </el-form-item>
                      <el-form-item label="既往史" class="outpatientCatalogInput">
                        <el-input type="textarea" v-model="outPatientForm.pastHistory"></el-input>
                      </el-form-item>
                      <el-form-item label="过敏史" class="outpatientCatalogInput">
                        <el-input type="textarea" v-model="outPatientForm.allergies"></el-input>
                      </el-form-item>
                      <el-form-item label="体格检查" class="outpatientCatalogInput">
                        <el-input type="textarea" v-model="outPatientForm.healthCheckup"></el-input>
                      </el-form-item>
                      <el-form-item label="发病日期" class="outpatientCatalogInput">
                        <el-date-picker type="date" placeholder="选择日期" v-model="outPatientForm.startDate"></el-date-picker>
                      </el-form-item>
                      </div>
                    <div>
                      <el-button type="primary" round @click="assessmentShowButton">评估诊断:</el-button>
                      <el-card>
                        <el-button type="primary" round style="float:right;" @click="drawer = true">添加诊断</el-button>
                        <el-drawer title="病症模板" :visible.sync="drawer" :with-header="false">
                          <el-table :data="diseData" @row-click="diseDataTransfer">
                            <el-table-column prop="icd" label="ICD编码"></el-table-column>
                            <el-table-column prop="name" label="名称"></el-table-column>
                            <el-table-column prop="code" label="编码"></el-table-column>
                            <el-table-column align="right">
                              <template slot="header" slot-scope="scope">
                                <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
                              </template>
                            </el-table-column>
                          </el-table>
                          <pagination
                            v-show="total>0"
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            @pagination="getDiseList"
                          />
                        </el-drawer>
                      <el-table :data="assessmentData">
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button
                              type="primary"
                              size="mini"
                              icon="el-icon-delete"
                              @click="outDel(scope.$index,scope.row)">删除
                            </el-button>
                          </template>
                        </el-table-column>
                        <el-table-column prop="id" label="ID" v-if="idHid"></el-table-column>
                        <el-table-column prop="icd" label="ICD编码"></el-table-column>
                        <el-table-column prop="name" label="名称"></el-table-column>
                        <el-table-column prop="code" label="编码"></el-table-column>
                      </el-table>
                        <el-button
                          type="primary"
                          icon="el-icon-plus"
                          size="mini"
                          @click="handleAdd"
                          v-hasPermi="['dms:case_history:add']"
                          style="float:right;"
                        >保存修改</el-button>
                      </el-card>
                    </div>
                  </div>
                  <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
                </el-col>

                <el-col :span="10">
                  <div id="quickShow" v-if="showOut">
                    <el-row>
                    <el-tabs v-model="firstChoice">
                      <el-tab-pane label="病历模板" name="outMedical">
                        <div>
                        <el-table :data="recordData" @row-click="handleShow" @row-dblclick="recordDataTransfer">
                          <el-table-column
                            prop="name"
                            label="病历名">
                          </el-table-column>
                          <el-table-column
                            prop="priliminaryDiseStrList"
                            label="主要诊断">
                          </el-table-column>
                        </el-table>
                        <el-form v-if="show">
                        <el-form-item :label="outModelTitle" style="padding: 10px">
                        </el-form-item>
                          <el-form-item>
                            <el-input type="text" disabled v-model="chiefComplaint"></el-input>
                            <el-input type="text" disabled v-model="historyOfPresentIllness"></el-input>
                            <el-input type="text" disabled v-model="historyOfTreatment"></el-input>
                            <el-input type="text" disabled v-model="pastHistory"></el-input>
                            <el-input type="text" disabled v-model="allergies"></el-input>
                            <el-input type="text" disabled v-model="healthCheckup"></el-input>
                            <el-input type="text" disabled v-model="outPatientForm.priliminaryDiseStrList"></el-input>
                          </el-form-item>
                        </el-form>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="常用就诊" name="judge">
                        <div>
                          <el-table :data="nonDrugModel">
                            <el-table-column prop="chiefComplaint" label="历史症状"></el-table-column>
                            <el-table-column prop="healthCheckup" label="健康状态"></el-table-column>
                            <el-table-column prop="priliminaryDiseStrList" label="病症"></el-table-column>
                            <el-table-column prop="startDate" label="发病时间"></el-table-column>
                          </el-table>
                        </div>
                      </el-tab-pane>
                      <el-tab-pane label="历史病历" name="historyOut">
                        <div>
                          <el-table :data="historyOutPatient">
                            <el-table-column prop="chiefComplaint" label="历史症状"></el-table-column>
                            <el-table-column prop="healthCheckup" label="健康状态"></el-table-column>
                            <el-table-column prop="priliminaryDiseStrList" label="病症"></el-table-column>
                            <el-table-column prop="startDate" label="发病时间"></el-table-column>
                          </el-table>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
          </el-tab-pane>
          <el-tab-pane label="检查申请" name="inspect"></el-tab-pane>
          <el-tab-pane label="检验申请" name="test"></el-tab-pane>
          <el-tab-pane label="门诊确诊" name="diagnosis"></el-tab-pane>
          <el-tab-pane label="成药处方" name="patentMedicine"></el-tab-pane>
          <el-tab-pane label="草药处方" name="herbalMedicine"></el-tab-pane>
          <el-tab-pane label="处置申请" name="disposalApplication"></el-tab-pane>
          <el-tab-pane label="患者账单" name="patientBill"></el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    </el-form>
  </div>
</template>

<script>
  import { listNon_drug_model,getCase_patHistory,listDms_case_model,getDms_case_model,listDise,getDise,listPatient,addCase_history,getPatientAndReg} from "@/api/dms/outpatient";

  export default {
    data() {
      return {

        //控制抽屉框的必要操作
        direction:'ltr',
        drawer:false,
        drawer1:false,
        //初始tab菜单位置
        firstChoice: 'outMedical',
        activeName: 'medicalRecord',

        outPatientForm:{
          //病人信息的表单输入框赋值数据
          id:'',
          patientMedicalRecordNo:'',
          name:'',
          gender:'',
          ageStr:'',
          //主区域表单输入框内容
          chiefComplaint: '',
          historyOfPresentIllness: '',
          historyOfTreatment: '',
          pastHistory: '',
          allergies: '',
          healthCheckup: '',
          startDate: '',
          priliminaryDiseIdList:'',
        },
        rules:{
          name:[{required:true,message:'请输入姓名',trigger:'blur'}],
          medicalNo:[{required:true,message:'请输入就诊号',trigger:'blur'}],
          gender:[{required:true,message:'请输入性别',trigger:'blur'}],
          age:[{required:true,message:'请输入年龄',trigger:'blur'}]
        },
        priliminaryDiseStrList : '',
        //病症抽屉框的搜索
        search: '',
        //病历模板表格数据
        recordData:{},
        //病历模板表单输入框数据
          outModelTitle: '',
          chiefComplaint : '',
          historyOfPresentIllness : '',
          historyOfTreatment : '',
          pastHistory : '',
          allergies :'',
          healthCheckup : '',
        //控制各种组件显隐
          show: false,
          showOut : false,
          button1Show: true,
          button2Show: false,
          assessmentShow: false,
          idHid:false,
        //病症列表表格数据
          diseData:{},
        //分页操作
        queryParams: {
          pageNum: 1,
          pageSize: 7,
          status: null,
          name: null,
          aim: null,
          code: null,
          type: null,
        },
        total: 0,
        //临时存储病症数据的表格数据
        assessmentData:[],
        //病患信息数据
        pmsPatientData:[],
        //对应患者历史病历数据
        historyOutPatient:[]
      };
    },
    created() {
      this.getCaseModelList();
      this.getDiseList();
      this.getListPatient();
    },
    methods: {
      //获取对应患者历史病历
      //获取病症集合并渲染到表格中
      getDiseList() {
        this.loading = true;
        listDise(this.queryParams).then(response => {
          this.total = response.total;
          this.diseData = response.rows;
          this.loading = false;
        })
      },
      //控制临时病症数据列表显隐
      assessmentShowButton() {
        if (this.assessmentShow == false) {
          this.assessmentShow = true;
        } else {
          this.assessmentShow = false;
        }
      },
      //获取病人信息
      getListPatient(){
        this.loading = true;
        listPatient(this.queryParams).then(response => {
          this.total = response.total;
          this.pmsPatientData = response.rows;
          this.loading = false;
        })
        },
      //病症模板数据集合
      getCaseModelList() {
        this.loading = true;
        listDms_case_model(this.queryParams).then(response => {
          this.total = response.total;
          this.recordData = response.rows;
          this.loading = false;
        })
      },
      //控制按钮显隐
      showOutEnd() {
        if (this.showOut == true) {
          this.showOut = false;
          this.button1Show = true;
          this.button2Show = false;
        }
      },
      showOutStart() {
        if (this.showOut == false) {
          this.showOut = true;
          this.button1Show = false;
          this.button2Show = true;
        }
      },
      //控制模板显隐
      handleShow(row) {
        this.show = true;
        const id = row.id || this.ids
        getDms_case_model(id).then(response => {
          this.outModelTitle = response.data.name;
          this.chiefComplaint = "主述:" + response.data.chiefComplaint;
          this.historyOfPresentIllness = "症状:" + response.data.historyOfPresentIllness;
          this.allergies = "过敏史:" + response.data.allergies;
          this.healthCheckup = "健康检查:" + response.data.healthCheckup;
          this.historyOfTreatment = "治疗情况:" + response.data.historyOfTreatment;
          this.outPatientForm.priliminaryDiseStrList = "主要诊断:" + response.data.priliminaryDiseStrList;
          this.pastHistory = "既往史:" + response.data.pastHistory;
        });
      },
      patientDataTransfer(row){
        const id = row.id || this.ids
        getPatientAndReg(id).then(response => {
          var sex = '';
          if(response.data.gender==1){
            sex = '女'
          }else{
            sex = '男'
          }
          this.outPatientForm.id = response.data.id;
          this.outPatientForm.ageStr = response.data.patientAgeStr;
          this.outPatientForm.name = response.data.name;
          this.outPatientForm.gender = sex;
          this.outPatientForm.patientMedicalRecordNo = response.data.medicalRecordNo;
          getCase_patHistory(this.outPatientForm.id).then(response => {
            if(response.data!=undefined){
              this.historyOutPatient.push({
                chiefComplaint:response.data.chiefComplaint,
                healthCheckup:response.data.healthCheckup,
                priliminaryDiseStrList:response.data.priliminaryDiseStrList,
                startDate:response.data.startDate,
              })
            }else{
              const h = this.$createElement;
              this.$notify({
                title: '提示',
                message: h('i', { style: 'color: teal'}, '此病患无历史病历')
              });
            }
          })
        });
      },
      diseDataTransfer(row,event,column) {
        this.$confirm('添加一条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(this.checkDiseData(row.icd)){
            getDise(row.id).then(response => {
              this.assessmentData.push({
                id: response.data.id,
                icd: response.data.icd,
                code: response.data.code,
                name: response.data.name
              });
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
            })
          }else{
            this.$message({
              type:'warning',
              message:'已有此数据，不能重复添加！'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          });
        });

      },
      checkDiseData(icd){
        let list = this.assessmentData;
        for(var i=0;i < list.length;i++){
          if(icd==list[i].icd){
            return false;
          }
        }
        return true;
      },
      outDel(index,row){
        this.$confirm('是否确认删除'+"'"+row.name+"'"+'此条数据?',"警告",{
          confirmButtonText:"确定",
          cancelButtonText:"取消",
          type:"warning"
        }).then(() =>{
          this.assessmentData.splice(index,1);
          this.msgSuccess("删除成功");
        })
      },
      recordDataTransfer(row){
       if(row.priliminaryDiseIdList!=null){
         //整一个病症id的字符串
         let diseListId = row.priliminaryDiseIdList;
         //若有多个id，将字符串按照逗号分割
         let diseSplitList = diseListId.split(",");
         for(var i = 0;i < diseSplitList.length;i++){
           getDise(parseInt(diseSplitList[i])).then(response => {
             this.assessmentData.push({
               icd: response.data.icd,
               code: response.data.code,
               name: response.data.name
             });
           });
         }
       }
        getDms_case_model(row.id).then(response => {
          this.outPatientForm.chiefComplaint = response.data.chiefComplaint;
          this.outPatientForm.historyOfPresentIllness = response.data.historyOfPresentIllness;
          this.outPatientForm.historyOfTreatment = response.data.historyOfTreatment;
          this.outPatientForm.pastHistory = response.data.pastHistory;
          this.outPatientForm.allergies = response.data.allergies;
          this.outPatientForm.healthCheckup =response.data.healthCheckup;
          /*this.date1 = response.data.*/
        })
      },
      //新增一条初诊病历信息
      handleAdd(){
        let assessmentList = this.assessmentData;
        var assessment = '';
        for(var i = 0;i < assessmentList.length;i++){
            if(assessmentList[i].id!=null){
              assessment += assessmentList[i].id+" "
            }
        }
        this.$refs["form"].validate(valid => {
          if(valid){
            var sex = '';
            if(this.outPatientForm.gender=='男'){
              sex = 0;
            }else{
              sex = 1;
            }
            this.outPatientForm.gender = sex;
            this.outPatientForm.priliminaryDiseIdList = assessment;
            addCase_history(this.outPatientForm).then(response =>{
              if(response.code===200){
                this.msgSuccess("新增成功");
                this.open = false;
                window.location.reload();
              }
            })
          }
        })
      },
    }
  };
</script>
<style>
  .temporary{
    vertical-align:middle;
    margin-left: 5%;
    color: blue;
  }

  .outpatient{
    display: inline-block;
    margin-left: 10px;
    margin-right: 20px;
    width: 15%;
  }
  .title{
    margin-left: 20px;
  }
  #head{
    margin: auto;
    left: 0;
    right: 0;
    width: 96%;
  }
  .quick{
    float: right;
    margin-right: 5%;
  }
  .outpatientCatalogInput{
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
  .iHref {
    display: inline;
    margin-left: 5%;
    color: #409EFF;
    }

</style>
